<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>我的二维码</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="../doctor/css/doctor.css" />
	</head>

	<body>
		<div id='app' v-cloak>
			<div class="doctorIndex_container qrcode_container">
				
				<div class="qrcode_card">
					<p class="qrcode_card_title">我的二维码</p>
					<div class="" v-if="detail.qrCode">
						<p class="qrcode_card_team"></p>
						<img class="qrcode_img" :src="detail.qrCode"/>
						<p class="qrcode_card_notes"></p>
					</div>
					<div v-else>
						<p class="qrcode_card_team"></p>
						<p class="qrcode_card_notes" @click="reloadQrcode" style="color: rgb(100, 100, 100);">重新生成二维码</p>
					</div>
				</div>

			</div>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>
	
	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from "../common/js/api/vue3-axios-utils.js";
		
		const PatientData = {
			data() {
				return {
					url: {
						getDetail:'/100/12/1001202',
						reloadQrcode: '/100/12/1001208'
					},
					patientId:'',
					detail:{},
				};
			},
			created() {
				this.patientId = url('?userid')
				this.init()
			},
			methods: {
				async init () {
	                await this.handleGetDetail()
	           	},
				handleGetDetail(){
					postAction(spliceUrl(this.url.getDetail),{patientId:this.patientId}).then((res) => {
						res = res.data
						console.log('handleGetDetail',res)
						if(res.success){
							this.detail = res.result[0]
						}
					})
				},
				tabHandler(index){
					this.active = index;
					console.log('hander',index)
				},
				reloadQrcode() {
					getAction(spliceUrl(this.url.reloadQrcode), {patientId:this.patientId}).then((res) => {
						res = res.data
						if(res.success){
							this.detail.qrCode = res.result
						} else {
							vant.Toast(res.message)
						}
					})
				}
			}
		};

		const app = Vue.createApp(PatientData);

		app.use(vant);

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload);

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount("#app");
	</script>

</html>

